<template>
  <div class="backTop"  v-show="state.scrollType" @click.stop="backTop">
    <van-icon name="back-top" />
  </div>
</template>
    
<script setup lang='ts'>
import { reactive,onBeforeUnmount, onMounted } from 'vue'
import { IBackTopData } from '@/types/commond'

const state = reactive<IBackTopData>({
  scrollType: false, // 控制按钮显示和隐藏
  scrollTop: 0
})
function backTop () {
  document.documentElement.scrollTop = 0
}
function handleScoll () {
  // 当滚动的距离大于500 时出现该按钮
  state.scrollTop = window.pageYOffset
  if (window.pageYOffset / 100 > 5) {
    state.scrollType = true
  } else {
    state.scrollType = false
  }
}
onMounted(() => {
  window.addEventListener('scroll', handleScoll)
})
onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScoll)
})

</script>
    
<style lang="less" scoped>
.backTop {
  position: fixed;
  right: 20px;
  bottom: 60px;
  border: 1px solid #1989fa;
  background-color: #f0f0f0;
  color: #1989fa;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
</style>